<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button> 按钮1</button>
<button> 按钮2</button>
<button> 按钮3</button>
<button> 按钮4</button>
<button> 按钮5</button>
<button> 按钮6</button>
<input type="button" value="input">
<script>
  var an= document.querySelectorAll("button");
  var an1 = document.querySelector("input");
  //点击时候
  an1.onmousedown=function (){
    this.style.color="red";
  }
  //释放点击时候
  an1.onmouseup= function (){
    this.style.color="blue";
  }
  an1.onclick= function (){
    this.style.color="";
  }
  for (let i = 0; i < an.length; i++) {
    //鼠标单击时候
    an[i].onclick=function (){
      // alert(this.innerText);
      // console.log(this.innerText)
      // console.log(this.innerHTML)
      // console.log(this.textContent)
      // for (let j = 0; j < an.length; j++) {
      //   if(i!==j)
      //   an[j].style.color="";
      // }
      this.style.color="red";
    }
    //鼠标经过时候
    an[i].onmousemove=function (){
      this.style.color="blue";
    }
    //鼠标离开时候
    an[i].onmouseout=function (){
      this.style.color="";
    }
  }

</script>
</body>
</html>